<!--
 * @Author: wangding
 * @Date: 2020-11-06 11:00:52
 * @LastEditTime: 2020-11-30 14:23:29
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\overview-inverter\batteryViews\errorMsg.vue
-->
<template>
    <div class="error-msg-main-box">
        <div class="date-box">
            <a href="javascript:;" @click='tractTime'><i class="el-icon-arrow-left"></i></a>
            <el-date-picker
            v-model="datestr"
            type="date"
            :placeholder="$t('selectDate')"
            value-format='yyyy-MM-dd'
            @change='changeDateTime'
            :clearable='false'
            :picker-options="pickerOptions"
            >
            </el-date-picker>
            <a href="javascript:;" @click='addTime' ><i class="el-icon-arrow-right"></i></a>
        </div>
        <div class="table-box">
            <baseTable v-loading="loading"  row-key='sid' :data="dataRows" border  stripe   :column='column' :select='false'>
            </baseTable>
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import moment from 'moment'
import baseTable from '../../../components/common/baseTable'
export default {
    components: {
        baseTable
    },
    props: {

    },
    data() {
        return {
            loading:false,
            dataRows:[],
            column:[{
                title: this.$t('devWifi.deviceSN'),
                value: 'inverterSn',
                slot: 'inverterSn'
            },{
                title: this.$t('alarm.errorCode'),
                value: 'errorCode'
            },{
                title: this.$t('alarm.errorType'),
                value: 'errorType'
            },{
                title: this.$t('alarm.errorMessage'),
                value: 'errorMessage'
            },{
                title: this.$t('alarm.date'),
                value: 'timeStringVal'
            }],
            pickerOptions:{ //禁用今天之后的时间
                disabledDate(time) {
                    return time.getTime() > Date.now()
                }
            },
            datestr:moment().format("YYYY-MM-DD"),
            size:10,
            current:1,
            total:1
            
        };
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.initPage()
    },
    methods: {
        initPage(){
            this.batteryShowWarning()
        },
        tractTime(){
            this.datestr = moment(this.value1).subtract(1, 'days').format('YYYY-MM-DD')
            this.batteryShowWarning()
        },
        addTime(){
            if(this.datestr == this.returnNowTime()? true:false){
                return
            }
            this.datestr = moment(this.value1).add(1, 'days').format('YYYY-MM-DD')
            this.batteryShowWarning() 
        },
        returnNowTime(){
            return moment().format("YYYY-MM-DD")
        },
        changeDateTime(){
            this.batteryShowWarning()
        },
        async batteryShowWarning(){
            this.loading = true
            let res = await this.API.batteryShowWarning({
                sn:sessionStorage.getItem('selRow_inverter_sn'),
                firmId:sessionStorage.getItem('selRow_firmId'),
                datestr :this.datestr,
                current:this.current,
                size:this.size,
            })
            this.loading = false
            this.total = res.total
            this.dataRows = res.rows || []
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
          this.batteryShowWarning()
        },
        handleCurrentChange(val) {
          this.current = val
          this.batteryShowWarning()
        },
    },
};
</script>

<style  lang="less" scoped>
.error-msg-main-box{
    .date-box{
        margin-bottom:10px;
    }
}
</style>
